<template>
  <div class="vips">
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="openid">
        <el-input v-model="searchMap.openid" placeholder="身份标识"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="nickName">
        <el-input v-model="searchMap.nickName" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="gender">
        <el-select v-model="searchMap.gender" placeholder="性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="items4" prop="tag">
        <el-input v-model="searchMap.tag" placeholder="标签"></el-input>
      </el-form-item>
      <el-form-item>
        <!--el-button type="primary" @click="fetchData">查询</!--el-button -->
        <!--el-button @click="resetForm('searchForm')">重置</！el-button -->
        <!--el-button @click="dialogFormVisible = true" style="background:#a5ec93;">新增</!--el-button -->
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      border
      stripe
      style="width: 100%; font-size: 2px; height: 100%"
      :cell-style="{ padding: '0px' }"
      :row-style="{ height: '36px' }"
    >
      <el-table-column type="index" label="序号" width="46"> </el-table-column>
      <el-table-column prop="" label="头像" width="80">
        <template slot-scope="scope">
          <img class="imgs" :src="scope.row.avatarUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column
        prop="openid"
        label="身份标识"
        width="220"
      ></el-table-column>
      <el-table-column prop="tag" label="标签"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.openid)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.openid, scope.row.nickName)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="编辑用户信息"
      width="460px"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="pojoEdit"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="标签" style="height: 10px" prop="tag">
          <el-input v-model="pojoEdit.tag" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOneUser('pojoEdit')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/api/user";
export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      searchMap: {
        openid: "",
        nickName: "",
        gender: "",
        tag: "",
      },
      pojoEdit: {
        openid: "",
        tag: "",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      userApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    saveOneUser() {
      userApi.editOneUser(this.pojoEdit).then((response) => {
        this.fetchData();
        this.dialogFormVisible = false;
      });
    },
    handleDelete(openid, nickName) {
      this.$confirm("此操作将永久删除" + nickName + ", 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userApi.deleteOneUser(openid).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleEdit(openid) {
      userApi.selectUserByOpenid(openid).then((response) => {
        (this.pojoEdit.openid = response.data[0].openid),
          (this.pojoEdit.tag = response.data[0].tag);
      });
      this.dialogFormVisible = true;
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
  },
};
</script>

<style>
.vips {
  height: 100%;
}
.imgs {
  width: 40px;
  height: 40px;
}
.item {
  height: 46px;
  margin: 4px 0px 0px 10px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>